{extend name='index@template/base'}{/extend}
{block name='style'}
<style>
    .nav-tabs-custom .nav-tabs{
        min-height: 100%;
        float: left;
        width: 10%;
    }
    .nav-tabs-custom .nav-tabs li{
        float: none;
        width: 100%;
    }
    .nav-tabs-custom .tab-content{
        width: 85%;
        float: left;
    }
    .nav-tabs-custom > .nav-tabs > li.active {
        border-top-color: #fff;
        border-right-color: #00a0e9;
    }
    .nav-tabs-custom > .nav-tabs > li.active a {
        border-right-color: transcategory;
        color: #00a0e9 ;
    }
    .btn-botom{
        width: 100%;
        height: 50px;
        margin-right: 20px;
        text-align: right;
        position: fixed;
        bottom:0;
        right:0;

    }
</style>
<link rel="stylesheet" href="__STATIC__/plugins/bootstrap-treeview/bootstrap-treeview.min.css">
<link href="__STATIC__/plugins/webuploader/webuploader_pc.css" rel="stylesheet" type="text/css"/>
<link href="__STATIC__/plugins/webuploader/custom/style.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="__STATIC__/plugins/select2/css/select2.min.css">
{/block}
{block name='script'}
<script src="__STATIC__/plugins/bootstrap-treeview/bootstrap-treeview.min.js"></script>
<script src="__STATIC__/plugins/select2/js/select2.full.min.js"></script>
<script src="__STATIC__/plugins/select2/js/i18n/zh-CN.js"></script>
{/block}
{block name='content'}
<div class="wrapper">
    <div class="nav-tabs-custom">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="false">基本信息</a></li>
            <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">详情</a></li>
            <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">图片</a></li>
            <li class=""><a href="#tab_4" data-toggle="tab" aria-expanded="false">会员折扣</a></li>
        </ul>
        <form id="form" class="form-horizontal" action="{:url('ShopGoods/update')}">
            <div class="tab-content">
                <div class="tab-pane active" id="tab_1">
                    <!--<label for="id_label_single">-->
                    <!--Click this to highlight the single select element-->

                    <!--<select class="js-example-basic-single js-states form-control" id="id_label_single"></select>-->
                    <!--</label>-->
                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><i data-icomoon="&#xe05c"></i>商品分类</label>
                            <div class="col-sm-6">
                                <input type="hidden" id="category_tree" name="category_tree"/>
                                <input type="hidden" id="id" name="id" value="{$data.id}"/>
                                <select id="cates"  name='cates[]' class="form-control select2" style='width:605px;' multiple='' >
                                    {volist name="category['rows']" id="vo"}
                                    <option value="{$vo.id}" {if is_array($cates) &&  in_array($vo.id,$cates)}selected{/if} >{$vo.name}</option>
                                    {/volist}
                                </select>
                                <!--<select id="c01-select" name="Importance" class="form-control select2" multiple="multiple"></select>-->
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">商品名称</label>
                            <div class="col-sm-6">
                                <input class="form-control" type="text" name="name" value="{$data.name}"  datatype="*" nullmsg="请填写商品名称">
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">商品简介</label>
                            <div class="col-sm-6">
                                <textarea name="intro" class="form-control" rows="3" maxlength="255">{$data.intro}</textarea>
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">原价</label>
                            <div class="col-sm-6">
                                <div class="input-group">
                                    <span class="input-group-addon">￥</span>
                                    <input name="price_original" value="{$data.price_original}" type="number" class="form-control" style="width: 100px;">
                                </div>
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">价格</label>
                            <div class="col-sm-6">
                                <div class="input-group">
                                    <span class="input-group-addon">￥</span>
                                    <input name="price" type="number" value="{$data.price}" class="form-control" style="width: 100px;">
                                </div>
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">库存</label>
                            <div class="col-sm-6">
                                <input class="form-control" type="number" name="stock"  style="width: 139px;">
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">销量</label>
                            <div class="col-sm-6">
                                <input class="form-control" type="number" name="sales" value="{$data.sales}"  style="width: 139px;">
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">排序</label>
                            <div class="col-sm-6">
                                <input class="form-control" type="number" name="sort" style="width: 139px;" value="{$data.sort}">
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">是否礼品</label>
                            <div class="col-sm-6"  style="margin-top: 7px">
                                <span class="mr20" style="padding-right: 20px"><input type="radio" class="minimal" name="flag_gift" value="0" {if $data.flag_gift eq 0}checked{/if} > 否</span>
                                <span class="mr20"><input type="radio" class="minimal" name="flag_gift" value="1" {if $data.flag_gift eq 1}checked{/if}> 是</span>
                            </div>
                            <div class="col-sm-2"></div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">是否上架</label>
                            <div class="col-sm-6" style="margin-top: 7px">
                                <span class="mr20" style="padding-right: 20px"><input type="radio" class="minimal" name="flag_putaway" value="1" {if $data.flag_putaway eq 0}checked{/if}> 下架</span>
                                <span class="mr20" ><input type="radio" class="minimal" name="flag_putaway" value="0" {if $data.flag_putaway eq 0}checked{/if}> 上架</span>
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                    </div>

                </div>
                <!-- /.tab-pane -->
                <div class="tab-pane" id="tab_2">
                    <div class="box-body">
                        <div class="form-group">
                            <div class="col-sm-22">
                                <!-- 加载编辑器的容器 -->
                                <script id="container1" name="detail" type="text/plain" style="height: 350px;border:none; width: 100%;"></script>
                                <!-- 配置文件 -->
                                <script type="text/javascript" src="__STATIC__/plugins/ueditor/ueditor.config.js"></script>
                                <!-- 编辑器源码文件 -->
                                <script src="__STATIC__/plugins/ueditor/ueditor.all.min.js" type="text/javascript"></script>
                                <!-- 实例化编辑器 -->
                                <script type="text/javascript">
                                    var ue = UE.getEditor('container1');
                                </script>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane" id="tab_3">
                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">封面图片</label>
                            <div class="col-sm-20">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div id="picker2"></div>
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="hidden" name="cover_image" id="cover_image"/>
                                        <img src="" id="img1" style="display: none; max-width: 120px; max-height: 120px;"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">封面图片</label>
                            <div class="col-sm-20">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div id="picker1"></div>
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="hidden" name="slide_image" id="slide_image"/>
                                        <img src="" id="img2" style="display: none; max-width: 120px; max-height: 120px;"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="tab_4">
                    <div class="box-body">
                        {volist name="level" id="vo"}
                        <div class="form-group">
                            <label class="col-sm-2 control-label">{$vo.name}</label>
                            <div class="col-sm-6">
                                <input class="form-control" type="text" name="group_price[{$vo.id}]" value="{$vo.price}">
                            </div>
                            <div class="col-sm-4">
                            </div>
                        </div>
                        {/volist}
                    </div>
                </div>

            </div>
            <div class="btn-botom">
                <button type="submit" class="btn btn-primary btn-submit">&nbsp;&nbsp;保存商品&nbsp;&nbsp;</button>
            </div>
        </form>
        <!-- /.tab-content -->
    </div>

</div>

{/block}
{block name='script_extra'}
<script>
    $("#cates").select2({
        language: "zh-CN", //设置 提示语言
        width: "100%", //设置下拉框的宽度
        placeholder: "请选择",
        tags: true
    });





    var cate_value='';
    var cate_default="{$data.category_tree}";
    var strs=cate_default.split(","); //字符分割
    $("#c01-select").select2({
        language: 'zh-CN',
        placeholder: "请选择分类",
        allowClear: true,
//        maximumSelectionLength: 2,  //设置最多可以选择多少项
        ajax: {
            url: "{:url('ShopGoods/get_full_category')}",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term, // search term
                    page: params.page
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;

                return {
                    results: data.rows,
                    pagination: {
                        more: (params.page * 30) < data.total
                    }
                };
            },
            cache: true
        }

    });

    $("#c01-select").on("select2:select",function(e){
        if(cate_value == ""){
            cate_value=e.params.data.id;
        }else{
            cate_value=cate_value+','+e.params.data.id
        }
        console.log(cate_value)
        $('#category_tree').val(cate_value);
    });

    $("#c01-select").on("select2:unselect",function(e){
        var aa=$('#category_tree').val();
        if(aa){
            var new_value=deleteSymbol(aa,e.params.data.id)
        }
        cate_value=new_value;
        $('#category_tree').val(new_value);
    });

    function deleteSymbol(checks,symbol){

        checks=checks.replace(symbol,"");
        console.log(checks);
        checks=checks.replace(",,",",");
        console.log(checks);
        if(checks.substr(0, 1) == ",") {
            checks = checks.slice(1);
        }
        if(checks.substr(-1) == ",") {
            checks = checks.substring(0,checks.length - 1)
        }
        console.log(checks);
        return checks;
    }
</script>
<script src="__STATIC__/plugins/webuploader/webuploader.min.js" type="text/javascript"></script>
<script>
    var tree_data_url="{:url('ShopGoodsCategory/cate_tree_data')}"
</script>
<script>
    //    $('.btn-submit').on('click',function () {
    //
    //    })
    $("#form").Validform({
        tiptype:2,
        showAllError:true,
        ajaxPost: true,
        callback: function (res) {
            if (res.success == true){
                layer.msg(res.message, {time: 1000},function () {
                    layer_close();
                    parent.$('#table').bootstrapTable('refresh');
                });
            }else{
                layer.alert(res.message);
            }
        }
    });
</script>
<script>
    function show_tree() {
        var treeview=$('.treeview');
        get_tree();
        if(treeview.is(":hidden")){
            treeview.show();
        }else{
            treeview.hide();
        }
    }
    document.onclick=function (e) {
        var treeview=$('.treeview');
        if(e.target.offsetParent!=$('#cate_input_group')[0]&&e.target.tagName!='SPAN'){
            treeview.hide();
        }
    }
    //    $('body').on('click',function (e) {
    //        var treeview=$('.treeview');
    //        var cate=$('#cate_input_group')[0];
    //        get_tree();
    //        console.log(e.target);
    //        if(e.target.offsetParent==cate){
    //            if(treeview.is(":hidden")){
    //                treeview.show();
    //            }else{
    //                treeview.hide();
    //            }
    //        }else if(e.target==document.querySelector('.treeview .glyphicon-plus')){
    //            console.log(111);
    //        }
    //        else{
    //                        treeview.hide();
    //        }
    //    });
    function get_tree() {
        var treeview=$('.treeview');
        $.post(tree_data_url, function (json) {
//            console.log(json);
            treeview.treeview({
                showCheckbox:true,
                color:'#428bca',
                onNodeSelected: function(event, node) {
                    $('.tree-input').val(node.text);
                    $('#category_id').val(node.id);
                    treeview.hide();
                },
                levels:1,
                data: json});
        });
    }

</script>

<script type="text/javascript">
    var goodsImg = '',goodsShowImgs = [];
</script>
<script>
    function webuploader() {
        var uploader = WebUploader.create({
            auto: true,
            pick:{
                id:'#picker1',
                label:'上传文件'
            },
            paste: document.body,
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },
            swf: '__STATIC__/plugins/webuploader/Uploader.swf',
            server: "{:url('ShopGoods/uploadImg')}",
            disableGlobalDnd: true,
            chunked: false,
            fileNumLimit: 10,
            fileSizeLimit: 5 * 1024 * 1024,
            fileSingleSizeLimit: 1024 * 1024
        });
        uploader.addButton({
            id: '#picker2',
            innerHTML: '选择文件'
        });

        uploader.on('uploadStart', function () {

            //Euix.mask();
        });

        uploader.on('uploadComplete', function () {
            uploader.reset();
            //Euix.unmask();
        });

        uploader.on('uploadSuccess', function (file, res) {

            if(uploader.options.pick){
                console.log(uploader);
            }

            if (res.success) {
                $('#img1').attr('src', res.data.base_url+res.data.url).show();
                goodsImg = res.data.file_id;
                $('#cover_image').val(goodsImg);
            } else {

            }
        });
    }


</script>
{/block}